<template>
  <div>
    <div class="container">

      <div class="row">
        <div class="col-lg-8">
          <div class="card mt-3">
            <div class="card card-header">
              <strong class="text-native">Dashboard</strong>
            </div>
            <img :src="dashboard" class="img-native">
            <div class="card card-body card-native">
              <strong class="text-native-1 ">欢迎您使用捐赠系统，尊敬的管理员！</strong>
            </div>
            <div class="card card-body card-native1">
              <strong class="text-native-time">
                {{ date }}
              </strong>
            </div>

            <div></div>
          </div>
        </div>

        <div class="col-lg-4 mt-3">
          <div class="card">
            <div class="card card-header">
              <strong class="text-native">平台信息</strong>
            </div>
            <div class="card-body">
              捐赠总金额
              <el-tag size="default">{{ platformInformation.paidDonationSumMoney }}¥</el-tag>
              <hr>
              总捐赠数
              <el-tag type="warning" size="default">
                {{ allPaidDonationCount }}
              </el-tag>
              <hr>
              捐赠成功数
              <el-tag type="success" size="default">{{ platformInformation.paidDonationCount }}</el-tag>
              <hr>
              捐赠失败数
              <el-tag type="danger" size="default">{{ platformInformation.noPaidDonationCount }}</el-tag>
              <hr>
              捐赠率
              <el-tag size="default">
                {{ donationRate }}%
              </el-tag>

            </div>
          </div>

          <div class="card mt-3">
            <div class="card card-header">
              <strong class="text-native">系统信息</strong>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-6">
                  <el-progress type="dashboard"
                               :color="color(Number(this.cpuInfo.cpuLoad.toFixed(2)))"
                               :percentage="Number(this.cpuInfo.cpuLoad.toFixed(2))"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">CPU使用率</span>
                      <span class="percentage-label">
                        {{ this.cpuInfo.coreNum }}
                        {{ this.cpuInfo.coreNum === 'loading' ? '' : '核心' }}
                      </span>
                    </template>
                  </el-progress>
                </div>

                <div class="col-6">
                  <el-progress type="dashboard"
                               :color="color(memoryUsedRate)"
                               :percentage="memoryUsedRate"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">
                        {{ percentage }}%
                      </span>
                      <span class="percentage-label">内存使用率(MB)</span>
                      <span class="percentage-label">
                        {{ this.memoryInfo.available }}
                        /
                        {{ this.memoryInfo.total }}
                      </span>
                    </template>
                  </el-progress>
                </div>
                <hr>
                <div>
                  操作系统: <span class="fw-lighter" v-text="systemInfo.osVersion"></span>
                  <hr>
                  Java版本: <span class="fw-lighter" v-text="systemInfo.javaVersion"></span>
                  <hr>
                  MySQL版本: <span class="fw-lighter" v-text="systemInfo.databaseVersion"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-center mt-3 mb-3">
        <span class="font-monospace">Made with&nbsp;</span>❤<span class="font-monospace">&nbsp;by <span
        class="fw-bolder">e4son</span> & <span class="fw-bolder">stephen</span></span>
      </div>
    </div>
  </div>


</template>


<script>
import dashboard from '@/assets/img.png'
import request from '@/http/request'

export default {
  name: 'Dashboard',
  data() {
    return {
      dashboard: dashboard,
      username: localStorage.getItem('username'),
      date: '',
      memoryInfo: {
        total: 1,
        available: 1,
      },
      platformInformation: {
        noPaidDonationCount: 'loading',
        paidDonationCount: 'loading',
        paidDonationSumMoney: 'loading',

      },
      cpuInfo: {
        coreNum: 'loading',
        cpuLoad: 0,
      },
      systemInfo: {
        osVersion: 'loading',
        databaseVersion: 'loading',
        javaVersion: 'loading',
      },

      intervals: {
        getDateTime: null,
        getMemoryInfo: null,
        getCpuInfo: null,
      },

    }
  },

  computed: {
    allPaidDonationCount() {
      return this.platformInformation.paidDonationCount + this.platformInformation.noPaidDonationCount
    },
    donationRate() {
      return (this.platformInformation.paidDonationCount / (this.platformInformation.noPaidDonationCount + this.platformInformation.paidDonationCount) * 100).toFixed(2)
    },
    memoryUsedRate() {
      return Number(((1 - (this.memoryInfo.available / this.memoryInfo.total)) * 100).toFixed(2))
    },
  },

  methods: {
    getDateTime() {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()

      let wk = new Date().getDay()

      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const week = weeks[wk] //获取星期几


      let state = ''
      if (hh >= 0 && hh <= 10) {
        state = '早上好!'
      } else if (hh > 10 && hh <= 13) {
        state = '中午好!'
      } else if (hh > 13 && hh <= 18) {
        state = '下午好!'
      } else {
        state = '晚上好!'
      }
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.date = state + ' 当前时间为: ' + yy + '年' + mm + '月' + dd + '日 ' + hh + ':' + mf + ':' + ss + ' ' + week
    },
    getMemoryInfo() {
      request.getMemoryInfo().then(res => {
        this.memoryInfo = res.data.result.memoryInfo
      })
    },
    getDashboard() {
      request.getDashboard().then(res => {
        this.platformInformation = res.data.result
        this.systemInfo.javaVersion = res.data.result.javaVersion
        this.systemInfo.osVersion = res.data.result.osVersion
        this.systemInfo.databaseVersion = res.data.result.databaseVersion
      })
    },
    getCpuInfo() {
      request.getCpuInfo().then(res => {
        this.cpuInfo = res.data.result.cpuInfo
      })
    },
    getBingImg() {
      request.getBingImg().then(res => {
        this.dashboard = 'https://cn.bing.com/' + res.data.result.bingResponse.images[0].url
      })
    },
    color(n) {
      if (n > 60 && n < 90) {
        return '#EDBB63'
      }
      if (n > 90) {
        return '#ea0519'
      }
    },
  },

  mounted() {
    this.getDateTime()

    this.intervals.getDateTime = setInterval(() => {
      this.getDateTime()
    }, 1000)

    this.getDashboard()

    this.getMemoryInfo()
    this.intervals.getMemoryInfo = setInterval(() => {
      this.getMemoryInfo()
    }, 1000)

    this.getCpuInfo()
    this.intervals.getCpuInfo = setInterval(() => {
      this.getCpuInfo()
    }, 2000)
    this.getBingImg()
  },

  //清除interval
  beforeUnmount() {
    clearInterval(this.intervals.getDateTime)
    clearInterval(this.intervals.getMemoryInfo)
    clearInterval(this.intervals.getCpuInfo)
  },
}
</script>

<style scoped>

.text-native {
  text-align: center;
}

.text-native-1 {
  text-align: center;
  font-size: 20px;
  background-image: linear-gradient(60deg, #2af598 0%, #009efd 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.text-native-time {
  text-align: center;
  font-size: 15px;
  color: #6b6bee;
}

.img-native {
  width: 100%;
  height: 100%;
}

.card-native {
  border-radius: 0
}

.card-native1 {
  border-radius: 0 0 5px 5px
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>